import React from 'react'
import {
    StyleSheet,
    Animated,
    Text,
    TouchableWithoutFeedback,
    ImageBackground,
} from 'react-native'

const selectedBackgroundColor = 'rgba(230,230,230,1)'

export default class CommunityTopCellView extends React.PureComponent {

    constructor(props) {
        super(props);
        // console.log('constuctor')
        this.bgColor = new Animated.Value(1)
        this.shouldHighlight = true;
    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer)
    }

    render() {
        var color = this.bgColor.interpolate({
            inputRange: [0, 1],
            outputRange: [selectedBackgroundColor, 'white']
        })

        return (
            <TouchableWithoutFeedback 
                onPress={this.onPress}
                onPressIn={this.onPressIn}
                onPressOut={this.onPressOut}
            >
                <Animated.View style={[styles.container, {backgroundColor:color}]} >
                    <ImageBackground source={require('../../img/top.png')} style={styles.img}>
                        <Text style={styles.title}>{this.props.data.title}</Text>
                    </ImageBackground>
                    <Text style={styles.content}>{this.props.data.content}</Text>
                </Animated.View>
            </TouchableWithoutFeedback>
        )
    }

    onPress = () => {
        // console.log('点击cell')
        this.bgColor.setValue(0)
        Animated.timing(this.bgColor, {
            // useNativeDriver: true,
            toValue: 1,
            duration: 250,
        }).start()
        this.props.clickTopAction(this.props.data)
    }

    onPressIn = () => {
        this.shouldHighlight = true
        this.timer = setTimeout(() => {
            if (this.shouldHighlight) {
                this.bgColor.setValue(0)
            }
        }, 100);
        // console.log('点击cell In')
    }

    onPressOut = () => {
        // console.log('点击cell Out')
        // Animated.timing(this.bgColor, {
        //     toValue: 1,
        //     duration: 250,
        // }).start()
        this.shouldHighlight = false
        this.bgColor.setValue(1)
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: 45,
        alignItems:'center',
        flexDirection:'row'
    },
    img:{
        left:10,
        width:43,
        height:20,
        justifyContent:'center',
        paddingLeft:3
    },
    title:{
        fontSize:13,
        color:'white'
    },
    content:{
        fontSize:15,
        marginLeft:20,
        marginRight:20
    }
})